Links werden mit Hilfe des a-Elementes (für anchor = Anker) und der href-Eigenschaft (für hyper reference = übergeordneter Bezug) eingefügt. Als Wert wird die vollständige Adresse des Zieldokumentes eingetragen. Achtung! Leerzeichen in der Adresse müssen durch die Zeichenfolge %20 ersetzt werden!
Beispiel:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>listing 3.5.1</title>
</head>
<body>
<p>
Dieser Absatz enthält einen Link auf die
<a href="http://www.poenitz-net.de/Mathematik/Mathematik.htm">
Startseite Mathematik<a> von poenitz-net.de.
</p>
</body>
</html>
e-mails werden durch einen Link gestartet, in dem die entsprechende e-mail-Adresse als Wert der mailto-Eigenschaft eingetragen wird. Der Bezug der e-mail kann über die subject-Eigenschaft vorgegeben werden.
Beispiel:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>listing 3.5.2</title>
</head>
<body>
<p>
Klickt man auf den Link
<a href="mailto:Arne.Poenitz@gmx.de?subject=HTML">
E-mail an mich<a>, so startet das e-mail-Programm und trägt
automatisch die Adresse Arne.Poenitz@gmx.de
sowie den Betreff HTML ein.
</p>
</body>
</html>
Grafiken werden mit Hilfe des img-Elementes (image = Bild) eingebunden. Das img-Element kann zu Beginn eines Absatzes (der folgenden Text umfließt dann die Grafik) oder in einen extra Absatz (die Grafik steht dann zwischen den Absätzen) eingefügt werden. Die folgenden Eigenschaften müssen bzw. können definiert werden:
| Eigenschaft | Bedeutung und mögliche Werte |
| src="..." | vollständige Quelladresse (source = Quelle) |
| alt="..." | Alternativtext, falls die Grafik nicht angezeigt werden kann. |
| align="..." | Ausrichtung der allein stehenden Grafik left, center oder right |
| style="float:..." | Ausrichtung der Grafik im umfließ:enden Text left und right |
| height | Dehnung oder Stauchung der Grafik auf die vorgegebenen Höhe in px oder % (optional) |
| width | Dehnung oder Stauchung der Grafik auf die vorgegebenen Breite in px oder % (optional) |
Beispiel:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>listing 3.5.3</title>
</head>
<body>
<p align="justify">
<img src="stavanger.jpg" alt="Stavanger"
width="30%" heigth="30%" style="float:right" >
Dieser Absatz umfließt im Blocksatz ein rechts ausgerichtetes
Bild der norwegischen Hafenstadt Stavanger , das auf 30 % der
Bildschirmgrösse gestaucht wurde. Wenn nur der Dateiname des
Bildes ohne Adresse angegeben wurde, geht der Browser davon aus,
dass sich das Bild im gleichen Ordner befindet wie das Hauptdokument
selbst. Dies entspricht auch der Regel, dass man einzubindende
Bilder nicht auf irgendeiner weit entfernten Webseite, sondern
im gleichen Ordner speichert. In diesem Fall wird abweichend von der
Regel tatsächlich auf ein Bild zugegriffen, das auf der Seite
<tt> http://www.poenitz-net.de</tt> liegt.
Der Alternativtext sollte die eigentlich darzustellende Grafik
möglichst unmissverständlich beschreiben.
</p>
<p>
Das gleiche Bild noch einmal am Ende des Absatzes. Diesmal ist das
Bild selbst horizontal zentriert ausgerichtet. Beachte, dass die Anweiseung
<tt>align="center"</tt> nicht im <tt>
img</tt>-Element, sondern im übergeordneten <tt>p</tt>-Element steht!
</p>
<p align="center">
<img src="stavanger.jpg" alt="Stavanger"
width="30%" heigth="30%" >
</body>
</html>
Hinweis: Das im listing 3.5.1 verwendetete <tt>...</tt>-Element (tt = true type) setzt den Inhalt in der für listings üblichen Schriftart Courier
Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.5.1 Das Bild findet sich unter der Adresse http://www.poenitz-net.de/Informatik/3.HTML/sailor.jpg.